<!doctype html>
<html class="no-js">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport"
          content="width=device-width, initial-scale=1">
    <title>用户管理</title>

    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit">

    <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/>

    <link rel="icon" type="image/png" href="../assets/i/favicon.png">

    <!-- Add to homescreen for Chrome on Android -->
    <meta name="mobile-web-app-capable" content="yes">
    <link rel="icon" sizes="192x192" href="../assets/i/app-icon72x72@2x.png">

    <!-- Add to homescreen for Safari on iOS -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-title" content="Amaze UI"/>
    <link rel="apple-touch-icon-precomposed" href="../assets/i/app-icon72x72@2x.png">

    <!-- Tile icon for Win8 (144x144 + tile color) -->
    <meta name="msapplication-TileImage" content="assets/i/app-icon72x72@2x.png">
    <meta name="msapplication-TileColor" content="#0e90d2">

    <link rel="stylesheet" href="../assets/css/amazeui.min.css">
    <link rel="stylesheet" href="../assets/css/app.css">

    <!--在这里编写你的代码-->

    <!--[if (gte IE 9)|!(IE)]><!-->
    <script src="../js/jquery2.js"></script>
    <!--<![endif]-->
    <!--[if lte IE 8 ]>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/modernizr/2.8.3/modernizr.js"></script>
    <script src="../assets/js/amazeui.ie8polyfill.min.js"></script>
    <![endif]-->
    <script src="../assets/js/amazeui.min.js"></script>
    <script src="../js/vue.js"></script>
<!--    弹框-->
    <link rel="stylesheet" type="text/css" href="../swal/sweetalert2.min.css">
    <script src="../swal/sweetalert2.min.js"></script>
    <!-- for IE support -->
    <script src="../swal/promise.min.js"></script>
<!--    <script src="../js/options.js"></script>-->
</head>

<style>
    body{
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    /*.lhl-box-3 li{*/
    /*    padding: 10px;*/
    /*}*/
    .lhl-card-h1 {
        margin: 10px;
        font-size: 30px;
        color: #000;
    }
    #lhl-right{
        margin: 0px;
        padding: 30px;
        background: #ecf0f1;
        min-height: 1200px;
    }
    #lhl-head{
        margin: 0px;
    }
    #lhl-card{
        padding: 0px 80px 0px 80px;
    }
    #lhl-card li{
        /*padding: 0px 80px 0px 80px;*/
    }

    .lhl-echar{
        padding: 0px 80px 0px 80px;
    }
    .lhl-echar-card{
    }
    .lhl-nomargin{
        margin: 0px;
    }
    .lhl-list{
        padding-top: 10px;
    }
    .lhl-list h3{
        margin: 0px;
        /*font-weight: bold;*/
    }
    .am-nav-header{
        border-left: 3px solid #3bb4f2 ;

    }
    .am-nav>li+.am-nav-header{
        margin-top: 0px;
    }
</style>

<body>
<div id="app">
    <!-- 头部区域开始 -->
    <header class="am-topbar am-topbar-inverse" id="lhl-head" >
        <h1 class="am-topbar-brand">
            <a href="#">Tweet 后台管理</a>
        </h1>

        <button class="am-topbar-btn am-topbar-toggle am-btn am-btn-sm am-btn-success am-show-sm-only"
                data-am-collapse="{target: '#doc-topbar-collapse'}"><span class="am-sr-only">导航切换</span> <span
                class="am-icon-bars"></span></button>

        <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse">

            <div class="am-topbar-right">
                <div class="am-dropdown" data-am-dropdown="{boundary: '.am-topbar'}">
                    <button class="am-btn am-btn-secondary am-topbar-btn am-btn-sm am-dropdown-toggle"
                            data-am-dropdown-toggle>用户信息 <span class="am-icon-caret-down"></span></button>
                    <ul class="am-dropdown-content">
                        <li><a href="#">用户名:{{UserName}}</a></li>
                        <li><a href="#">修改密码</a></li>
                    </ul>
                </div>
            </div>

            <div class="am-topbar-right">
                <button class="am-btn am-btn-primary am-topbar-btn am-btn-sm" @click="userLogin">管理员登录</button>
            </div>
        </div>
    </header>
    <!-- 头部区域结束 -->
    <!-- 数据化信息开始-->
    <div class="am-g">
        <div class="am-u-lg-2">
            <ul class="am-nav lhl-list">
                <li><a href="./data.html">首页</a></li>
                <li class="am-nav-divider"></li>
                <li><a href="./data.html">数据展示</a></li>
                <li  class="am-nav-header">用户管理</li>
                <li><a href="./tweet.html">推文管理</a></li>
                <li><a href="./change.html">账户管理</a></li>
                <li><a href="./editor.html">文章管理</a></li>
                <li><a href="./head.html">推广管理</a></li>
            </ul>
        </div>
        <div class="am-u-lg-10" id="lhl-right">
            <h1>用户管理</h1>
            <table class="am-table am-table-bordered am-table-radius" style="background-color:#fff;">
                <tr>
                    <td>
                        <div class="am-form-inline">
                            <div class="am-form-group">
                                <label>用户编号： </label>
                                <input type="number" class="am-form-field" placeholder="ID" v-model="userid">
                            </div>
                            <button type="submit" class="am-btn am-btn-primary" @click="requeryUser(userid)">查询</button>
                        </div>
                    </td>
                </tr>
            </table>
            <h2>查询结果</h2>
            <table class="am-table am-table-bordered am-table-radius am-table-striped" style="background-color:#fff">
                <thead>
                <tr>
                    <th>头像</th>
                    <th>编号</th>
                    <th>昵称</th>
                    <th>登录名</th>
                    <th>创建时间</th>
                    <th>更多信息</th>
                    <th>修改密码</th>
                    <th>删除</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="(item,key) in table">
                    <td>
                        <img class="am-radius" v-bind:src="'.'+item.user_head" width="25px" height="25px" />
                    </td>
                    <td>{{item.userid}}</td>
                    <td>{{item.user_name}}</td>
                    <td>{{item.login_name}}</td>
                    <td>{{item.create_date}}</td>
                    <td>
                        <a href="#" @click="showUserInfo(key)">查看详细</a>
                    </td>
                    <td>
                        <a href="#" @click="changePassword(key)" >修改密码</a>
                    </td>
                    <td>
                        <a href="#" @click="deleteUser(key)">删除用户</a>
                    </td>
                </tr>

                </tbody>
            </table>
            <ul class="am-pagination">
                <li class="am-disabled"><a href="#">&laquo;</a></li>
<!--                <li class="am-active"><a href="#">1</a></li>-->
                <li v-for="(index,key) in countPage()">
                    <a href="#" @click="SwitchDataPage(key)">{{index}}</a>
                </li>
                <li class="am-disabled"><a href="#">&raquo;</a></li>
            </ul>
        </div>
    </div>
    <!-- 数据化信息结束-->
</div>


<script type="text/javascript">
    var app=new Vue({
       el:"#app",
       data:{
           tableSource:[],
           table:[],
           tablePagelength:10,
           userCount:0,
           userid:null,
           UserPassword:'',
           UserName:'',
       },
        methods:{
            inputPwd:function(){
                swal({
                    title: '输入密码',
                    input: 'password',
                    inputAttributes: {
                        'maxlength': 30,
                        'autocapitalize': 'off',
                        'autocorrect': 'off'
                    }
                }).then(function(result) {
                    app.UserPassword=result;
                    $.post('../manager',{
                        type:'login',
                        username:app.UserName,
                        password:app.UserPassword
                    },function (response) {
                        console.log(response)
                        if (response == "success"){
                            swal(
                                '您好！'+app.UserName,
                                '欢迎登录后台管理，请为所欲为吧!',
                                'success'
                            );
                        }else{
                            swal(
                                '登陆失败！',
                                '抱歉您登录不成功，没办法为所欲为!',
                                'error'
                            )
                        }
                    });
                })
            },
            userLogin:function () {
                //登录
                swal({
                    title: '输入登录账号',
                    input: 'text',
                    showCancelButton: true,
                    inputValidator: function(value) {
                        return new Promise(function(resolve, reject) {
                            if (value) {
                                resolve();
                            } else {
                                reject('请填写账号');
                            }
                        });
                    }
                }).then(function(result) {
                    // 输入用户完成
                    app.UserName=result;
                    app.inputPwd();
                })
            },
           SwitchDataPage:function (id) {
               //切换页
               this.requestUserlist(id);
           },
            countPage:function(){
               //计算页数
                return Math.round(this.userCount/this.tablePagelength+0.5);
            },
            requestUserlist:function(page){
                //请求用户列表 根据用户id
                var requestList={type:'query.user.list'}
                if (page>0){
                    var userid=this.table[this.table.length-1].userid;
                    requestList.userid=userid;
                }
                $.post("../manager",requestList,function (result) {
                    if (result!=''){
                        result=JSON.parse(result);
                        result.user=result.user.sort(function (a,b) {
                            return b-a;
                        });
                        Vue.set(app,'table',result.user);

                    }

                });
            },

            showUserInfo:function (key) {
               //查看用户详情
                swal({
                    title:'用户详细信息',
                    html:"<table class='am-table am-table-bordered am-table-centered'>" +
                        "<tr>" +
                        "<td rowspan='7' class='am-text-middle'>" +
                        "<img src='."+this.table[key].user_head+"' width='100px' />" +
                        "</td>" +
                        "<td>" +
                        "用户编号:" +
                        "</td>" +
                        "<td>" +
                        this.table[key].userid +
                        "</td>" +
                        "</tr>" +
                        "<tr><td>用户昵称:</td><td>"+this.table[key].user_name+"</td></tr>" +
                        "<tr><td>登录名:</td><td>"+this.table[key].login_name+"</td></tr>" +
                        "<tr><td>性别:</td><td>"+this.table[key].sex+"</td></tr>" +
                        "<tr><td>出生日期:</td><td>"+this.table[key].borndate+"</td></tr>" +
                        "<tr><td>创建日期:</td><td>"+this.table[key].create_date+"</td></tr>" +
                        "<tr><td>个人简介:</td><td>"+this.table[key].simple+"</td></tr>" +
                        "</table>",
                    showCloseButton: true,
                });
            },
            changePassword:function (key) {
                //修改用户密码
                var userid=this.table[key].userid;
                swal({
                    title: '输入密码;',
                    input: 'password',
                    showCancelButton: true,
                    inputAttributes: {
                        'maxlength': 30,
                        'autocapitalize': 'off',
                        'autocorrect': 'off'
                    }
                }).then(function(password) {
                    if (password==""){
                        return false;
                    }
                    $.post('../manager',{
                        type:'change.user.password',
                        userid:userid,
                        password:password
                    },function (result) {
                        if (result!=""){
                            result=JSON.parse(result);
                            var text="修改失败";
                            var type="error";
                            if (result.result){
                                text="修改成功";
                                type="success";
                            }
                            swal({
                                text:text,
                                type:type,
                            });
                        }

                    });
                });

            },
            requeryUser:function (userid) {
               //请求单一用户
                $.post("../manager",{
                    type:'query.user.user',
                    userid:userid
                },function (result) {
                    result=JSON.parse(result);
                    Vue.set(app,'table',result.user);
                })
            },
            deleteUser:function (key) {
                //删除用户
                var userid=this.table[key].userid;
                swal({
                    title: '请输入我确定进行删除',
                    input: 'text',
                    showCancelButton: true,
                }).then(function(text) {
                    if (text!="我确定"){
                        swal("用户取消了删除");
                        return false;
                    }
                    $.post('../manager',{
                        type:'delete.user',
                        userid:userid
                    },function (result) {
                        if (result!=""){
                            result=JSON.parse(result);
                            var text="删除失败";
                            var type="error";
                            if (result.result){
                                text="删除成功";
                                type="success";
                            }
                            swal({
                                text:text,
                                type:type,
                            });
                            app.table.splice(key,1);
                        }

                    });
                });
            }
        },
        mounted:function () {
            // this.SwitchDataPage(0);
            this.UserName=localStorage.getItem('weibo_managername');
        },
        created:function () {
            var _this=this;
            //基本信息
            $.post('../manager',{
                type:'query.all'
            },function (result) {
                if (result!=""){
                    result=JSON.parse(result);
                    Vue.set(app,'userCount',result.number[1]);
                    _this.SwitchDataPage(0);
                }
            });
        }
    });
</script>
<!--<script src="../js/options.js"></script>-->
<!--<script src="../js/manager_js.js"></script>-->
</body>
</html>